<template>
  <div class="basic-setting-content pl16 pr16">
    <!--规格设置-->
    <div class="common-form">规格/库存</div>
    <!--减库存方式-->
    <el-form-item label="库存计算方式：">
      <el-radio-group :disabled="disabled" v-model="form.model.deductStockType">
        <el-radio :label="10" border>下单减库存</el-radio>
        <!-- <el-radio :label="20">付款减库存</el-radio> -->
      </el-radio-group>
    </el-form-item>
    <el-form-item label="产品规格：">
      <el-button type="primary" style="margin:10px 0px" v-if="!disabled" @click="addRow">新增</el-button>
      <el-table :data="form.model.specList" stripe border>
        <el-table-column :prop="p.prop" :label="p.label" width="180" v-for="(p, index)  in colData" :key="index">
          <template #default="scope">
            <el-select v-model="scope.row[p.prop]" :disabled="disabled" v-if="p.prop === 'produceAddress'" placeholder="选择生产基地">
              <el-option v-for="item in form.produceAddrList" :key="item.produceAddrId" :label="item.produceName" :value="item.produceAddrId" />
            </el-select>
            <el-input-number v-model="scope.row[p.prop]" :disabled="disabled" v-else-if="numberCodes.includes(p.prop)" :min="0"></el-input-number>
            <div v-else-if="p.prop === 'image'">
              <div v-if="scope.row.image && scope.row.image.filePath" style="position: relative;">
                <div class="deleteIcon" @click="removeClick(scope.$index)" v-if="!disabled">x</div>
                <img @click="viewImg(scope.row)" v-if="scope.row.image.filePath" :src="scope.row.image.filePath" style="width:30px;height:30px;border-radius:5px;" />
              </div>
              <el-button type="primary" v-else size="small" @click="openImage(scope.$index)">
                选择图片
              </el-button>
            </div>
            <el-input v-model="scope.row[p.prop]" :disabled="disabled || (scope.row['disabled'] && p.prop === 'color')"
              v-else>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="control" label="操作" width="180" v-if="!disabled">
          <template #default="scope">
            <el-button type="text" @click="onDelClick(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <!-- 图片上传 -->
    <Upload :config="config" v-if="imageShow" :isupload="isProductUpload" @returnImgs="returnProductImgsFunc">上传图片
    </Upload>

    <el-dialog title="详情图片" v-model="dialogVisibleImg" width="60%" :before-close="handleClose">
      <img style="margin: 0 auto;" :src="dialogVisibleImgUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import Single from './spec/Single.vue';
import Many from './spec/Many.vue';
import Upload from "@/components/file/Upload.vue";
export default {
  components: {
    /*单规格*/
    Single,
    /*多规格*/
    Many,
    Upload
  },
  inject: ['form'],
  data() {
    return {
      dialogVisibleImg: false,
      dialogVisibleImgUrl: '',
      isProductUpload: false,
      imageShow: false,
      config: {
        total: 1,
        fileType: "image",
      },
      tableData: [],
      disabled: false,
      colData: [],
      numberCodes: ['productPrice', 'stockNum', 'tenThousandPrice',
        'lakhPrice', 'linePrice', 'minBuyCount'],
      jdOptions: [
        { label: '种源本部', value: 5 },
        { label: '玉溪基地', value: 7 },
        { label: '海口基地', value: 8 }
      ],
      rowIndex: -1
    }
  },
  watch: {
    'form.model.modelName': {
      deep: true,
      immediate: true,
      handler(n, v) {
        if (n !== '农资') {
          this.colData = [
            { prop: 'color', label: '颜色' },
            { prop: 'sku', label: '商品编码(SKU)' },
            { prop: 'image', label: '图片' },
            { prop: 'minBuyCount', label: '最小起订量' },
            // { prop: 'produceAddress', label: '生产基地' },
            { prop: 'stockNum', label: '库存' },
            { prop: 'productPrice', label: n + '价格' },
            { prop: 'tenThousandPrice', label: n + '优惠价(一万)' },
            { prop: 'lakhPrice', label: n + '优惠价(十万)' },
          ]
          if (n === '种苗')
            this.colData.push({ prop: 'stockRatio', label: '库存比例' })
        } else {
          this.colData = [
            { prop: 'type', label: '类型' },
            { prop: 'image', label: '图片' },
            { prop: 'sku', label: '商品编码(SKU)' },
            { prop: 'minBuyCount', label: '最小起订量' },
            { prop: 'stockNum', label: '库存' },
            { prop: 'productPrice', label: n + '原价' },
            { prop: 'linePrice', label: '划线价' },
          ]
        }
      }
    }
  },
  methods: {
    viewImg(row) {
      this.dialogVisibleImgUrl = row.image.filePath;
      this.dialogVisibleImg = true;
    },
    openImage(index) {
      this.imageShow = true
      this.rowIndex = index
    },
    returnProductImgsFunc(e) {
      if (e && e.length > 0) {
        const index = this.rowIndex
        if (!this.form.model.specList[index]['image'])
          this.form.model.specList[index]['image'] = {}
        this.form.model.specList[index]['image'] = {
          imageId: e[0].fileId,
          filePath: e[0].filePath
        }
        this.imageShow = false
      } else {
        this.imageShow = false
      }
    },
    removeClick(index) {
      this.form.model.specList[index]['image'] = {
        imageId: '',
        filePath: ''
      }
      this.form.model.specList[index]['imageId'] = ''
      this.form.model.specList[index]['imagePath'] = ''
    },
    addRow() {
      if (this.form.model.modelName === '农资') {
        this.form.model.specList.push({
          sku: '',
          minBuyCount: 1,
          stockNum: '',
          productPrice: 0,
          linePrice: 0,
          image: ''
        })
      } else {
        this.form.model.specList.push({
          color: '',
          sku: '',
          minBuyCount: 1,
          stockNum: '',
          productPrice: 0,
          tenThousandPrice: 0,
          lakhPrice: 0,
          image: ''
        })
      }
    },
    onDelClick(index) {
      this.form.model.specList.splice(index, 1)
    }

  },
  created() {
    this.disabled = this.$route.query.scene === 'view'
  }
};
</script>

<style scoped>
.deleteIcon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  text-align: center;
  line-height: 15px;
  border-radius: 50%;
  background-color: transparent;
  color: red;
  position: absolute;
  left: 60px;
  font-size: 20px;
}
::v-deep(.el-scrollbar__bar.is-horizontal) {
  height: 20px;          /* 想多粗就写多大 */
}
</style>